<script setup></script>

<template>
  <div class="mask">
    <div class="background"></div>
  </div>
  <My-Map />
  <div class="data-box">
    <div class="left-line">
      <Left-Top/>
      <Left-Center/>
      <Left-Bottom/>
    </div>
    <div class="center">
      <Center-Top/>
    </div>
    <div class="right-line">
      <Right-Top/>
      <Right-Center/>
      <Right-Bottom/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  background: url(/src/assets/img/mask.png) no-repeat center center;
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.background {
  width: 100%;
  height: 100%;
  background: url('/src/assets/img/bg-border.png') no-repeat center center;
}
.data-box {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
  padding: 0 50px;
  display: flex;
  pointer-events: none;
  top: 0;
}

.left-line,
.right-line {
  width: 440px;
  pointer-events: fill;
  margin-top: 63px;
}

.center {
  flex: 1;
}

.center {
  pointer-events: none;
}
</style>
